<template>
  <div>
    <div class="aside_box">
      <div class="aside_box_title">部门/科室目录</div>
      <el-tree
          :data="list"
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          default-expand-all
          @node-click="handleNodeClick"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          
      >
      <!-- :props="defaultProps" -->
      </el-tree>
    </div>
  </div>
</template>

<script setup lang="ts">
export default {
  data() {
    return {
      list: [],
    }
  },
  created() {
    this.departmentList()
  },
  methods: {
    // 部门数结构请求
    departmentList() {
      this.$axios.departmentList({}).then(res => {
        if (res.code == '00000') {
          this.list = res.data
          console.log(res.data);
          
        }
      })
    },
    handleNodeClick(data) {
      // console.log(data);
      this.$emit('getcatatlogue', data)
    },
    handleDragStart(node, ev) {
      console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === '二级 3-1') {
        return type !== 'inner';
      } else {
        return true;
      }
    },
  }
}
</script>

<style scoped>

.el-date-editor.el-input {
  /* width: 50%; */
}

.header_top .el-divider--horizontal {
  margin-top: 12px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.aside_box {
  /* height: 100%; */
  background: #fff;
  padding-top: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.main_box_title {
  background: #fff;
  padding: 10px;

}

.el-tree {
  padding-bottom: 20px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
